<template>
    <div class="my-page">
        <!--        <div>{{this.url}}</div>-->
        <div class="account">
            <div class="avatar"><img width="100" height="100" :src="this.info.headimgurl"></div>
            <div class="info">
                <div class="name">桌号：{{this.info.address}}</div>
                <div class="name">用户名：{{decodeURI(decodeURI(this.info.nickname))}}</div>
                <div class="openid">账号:{{this.info.openid}}</div>
                <div>性别:{{this.info.sex==1?'男':'女'}}</div>
            </div>
        </div>
        <div class="order-list">
            <div class="history">消费记录</div>
            <div v-if="orderMaster.length!==0">
                <div v-for="(order,index) in orderMaster" :key="index" class="order-item">
                    <div class="content">
                        <div class="orderId">订单编号：{{order.orderId}}</div>
                        <div class="orderAddress">
                            地址：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{order.buyerAddress}}
                        </div>
                        <div class="orderAmount">实付金额：{{order.orderAmount}}元</div>
                        <div class="payStatus">支付状态：{{order.payStatus==1?'已支付':'未支付'}}</div>
                        <div class="createTime">创建时间：{{order.createTime.substring(0,19).replace('T',' ')}}</div>
                    </div>
                    <div class="detail" @click="showOrderDetail(order)">详情</div>
                </div>
            </div>
            <div v-else style="width: 100%;padding: 30px 0;font-size: 14px;text-align: center;">还没有消费过哦~</div>
        </div>
        <el-dialog title="订单详情"
                   :visible="showDetail"
                   @close="showDetail=false"
                   width="95%"
                   class="order-detail">
            <div class="orderId">订单号：{{currentOrder.orderId}}</div>
            <div class="buyerName">买家昵称：{{decodeURI(currentOrder.buyerName)}}</div>
            <div class="buyerAddress">地址：{{decodeURI(currentOrder.buyerAddress)}}</div>
            <div class="buyerOpenid">openid：{{decodeURI(currentOrder.buyerOpenid)}}</div>
            <div class="orderAmount">总金额：{{decodeURI(currentOrder.orderAmount)}}元</div>
            <div class="payStatus">支付状态：{{currentOrder.payStatus==1?'已支付':'未支付'}}</div>
            <div class="orderStatus">订单状态：{{currentOrder.orderStatus==1?'已处理':'未处理'}}</div>
            <div class="createTime" v-if="currentOrder.createTime">
                订单创建时间：{{currentOrder.createTime.substring(0,19).replace('T',' ')}}
            </div>
            <div class="list-title">商品列表</div>
            <div class="content" v-for="(detail,index) in orderDetails" :key="index">
                <div class="productName">商品名称：{{detail.productName}}</div>
                <div class="count">数量：{{detail.count}}</div>
                <div class="productPrice">单价：{{detail.productPrice}}</div>
                <div class="productIcon">
                    <el-image :src="detail.productIcon"
                              :preview-src-list="[detail.productIcon]"
                              width="100"
                              height="100"
                    ></el-image>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import {urlParse} from "@/common/js/util";

    export default {
        data() {
            return {
                showDetail: false,
                currentOrder: '',
                orderDetails: '',
                url: '',
                info: {
                    "country": '',
                    "province": '',
                    "city": '',
                    "openid": '',
                    "sex": '',
                    "nickname": '',
                    "headimgurl": ''
                },
                orderMaster: []
            }
        },
        methods: {
            showOrderDetail(order) {
                this.$http.get('/api/order/detail', {
                    params: {
                        orderId: order.orderId
                    }
                }).then((response) => {
                    this.orderDetails = response.data;
                });
                this.currentOrder = order;
                this.showDetail = true;
            }
        },
        created() {
            this.url = window.location.href;
            this.info = urlParse(window.location.href);
            this.$http.get('/api/order/list', {
                params: {buyer_openid: this.info.openid}
            }).then((response) => {
                this.orderMaster = response.body.data;
            })
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .my-page {
        box-sizing border-box
        font-size 12px
        width 100%
        padding 10px
        margin auto

        .account {
            width 100%
            margin 10px

            .info {
                display inline-block
                width 70%
                padding 20px 10px
                box-sizing border-box

                div {
                    margin 0 0 10px 0
                }
            }

            .avatar {
                display inline-block
                vertical-align top
                width 30%
                text-align center
                padding 10px 0
                height 100px
                border-radius 50%
                box-shadow 0 0 10px darkgrey

                img {
                    border-radius 50%
                }
            }
        }

        .order-list {
            width 100%
            box-sizing border-box

            .history {
                border-bottom 1px solid darkgrey
                text-align center
                font-size 16px
                padding 0 0 10px
            }

            .order-item {
                padding 10px
                border-bottom 1px solid darkgrey

                .content {
                    display inline-block
                    width 86%
                }

                .detail {
                    display inline-block
                    width 14%
                    height 100%
                    padding 10px 10px 0
                    box-sizing border-box
                    font-size 14px
                    color #409EFF
                }
            }
        }
        .order-detail{
            div{
                padding 0 0 10px
            }
            .list-title{
                text-align center
                font-weight 700
                font-size 16px
                border-bottom 1px solid #8c939d
                border-top 1px solid #8c939d
                margin 10px 0
                padding 10px 0
            }
            .content{
                display inline-block
                width 50%
                .productIcon{
                    width 150px
                    height 150px
                }
            }
        }
    }
</style>
